<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>障碍物渲染测试</title>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .test-area {
            margin: 20px 0;
            padding: 20px;
            border: 2px solid #ddd;
            border-radius: 4px;
        }
        canvas {
            border: 1px solid #ccc;
            background: #f8f8f8;
        }
        .controls {
            margin: 10px 0;
        }
        button {
            padding: 10px 20px;
            margin: 5px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background: #0056b3;
        }
        .log {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            height: 200px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>障碍物渲染器测试</h1>
        
        <div class="test-area">
            <h3>测试画布</h3>
            <canvas id="testCanvas" width="800" height="600"></canvas>
            
            <div class="controls">
                <button onclick="testObstacleRenderer()">测试障碍物渲染器</button>
                <button onclick="loadMapData()">加载地图数据</button>
                <button onclick="clearCanvas()">清空画布</button>
            </div>
        </div>
        
        <div class="test-area">
            <h3>控制台日志</h3>
            <div id="log" class="log"></div>
        </div>
    </div>

    <!-- 引入障碍物渲染器 -->
    <script src="js/obstacle-renderer.js"></script>
    
    <script>
        // 重写console.log以在页面上显示日志
        const originalLog = console.log;
        const originalWarn = console.warn;
        const originalError = console.error;
        
        function logToPage(message, type = 'info') {
            const logDiv = document.getElementById('log');
            const timestamp = new Date().toLocaleTimeString();
            const color = type === 'error' ? 'red' : type === 'warn' ? 'orange' : 'green';
            logDiv.innerHTML += `<span style="color: ${color}">[${timestamp}] ${message}</span><br>`;
            logDiv.scrollTop = logDiv.scrollHeight;
        }
        
        console.log = function(...args) {
            originalLog.apply(console, args);
            logToPage(args.join(' '));
        };
        
        console.warn = function(...args) {
            originalWarn.apply(console, args);
            logToPage(args.join(' '), 'warn');
        };
        
        console.error = function(...args) {
            originalError.apply(console, args);
            logToPage(args.join(' '), 'error');
        };
        
        const canvas = document.getElementById('testCanvas');
        const ctx = canvas.getContext('2d');
        
        // 测试障碍物渲染器
        function testObstacleRenderer() {
            console.log('开始测试障碍物渲染器...');
            
            // 检查障碍物渲染器是否已加载
            if (!window.obstacleRenderer) {
                console.error('障碍物渲染器未找到！');
                return;
            }
            
            console.log('障碍物渲染器已加载');
            
            // 初始化障碍物渲染器
            const gameConfig = {
                viewportSize: 800,
                gridSize: 20
            };
            
            window.obstacleRenderer.initialize(ctx, gameConfig);
            console.log('障碍物渲染器初始化完成');
            
            // 创建一些测试障碍物
            const testObstacles = [
                {x: 100, y: 100},
                {x: 120, y: 100},
                {x: 140, y: 100},
                {x: 160, y: 100},
                {x: 180, y: 100},
                {x: 200, y: 100},
                {x: 100, y: 120},
                {x: 100, y: 140},
                {x: 100, y: 160},
                {x: 100, y: 180}
            ];
            
            window.obstacleRenderer.setObstacles(testObstacles);
            console.log(`设置了 ${testObstacles.length} 个测试障碍物`);
            
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制网格背景
            drawGrid();
            
            // 渲染障碍物
            const scaleX = canvas.width / gameConfig.viewportSize;
            const scaleY = canvas.height / gameConfig.viewportSize;
            
            window.obstacleRenderer.render(ctx, scaleX, scaleY);
            console.log('障碍物渲染完成');
        }
        
        // 加载地图数据
        function loadMapData() {
            console.log('开始加载地图数据...');
            
            fetch('js/data/map/snake_map_normal_1.json')
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`地图文件加载失败: ${response.status}`);
                    }
                    return response.json();
                })
                .then(mapData => {
                    console.log('地图文件加载成功');
                    
                    // 检查障碍物数据
                    if (mapData.elements && mapData.elements.obstacles) {
                        console.log(`地图包含 ${mapData.elements.obstacles.length} 个障碍物`);
                        
                        // 初始化障碍物渲染器
                        const gameConfig = {
                            viewportSize: 800,
                            gridSize: mapData.gridSize || 20
                        };
                        
                        if (window.obstacleRenderer) {
                            window.obstacleRenderer.initialize(ctx, gameConfig);
                            window.obstacleRenderer.setObstacles(mapData.elements.obstacles);
                            
                            // 清空画布
                            ctx.clearRect(0, 0, canvas.width, canvas.height);
                            
                            // 绘制网格背景
                            drawGrid();
                            
                            // 渲染障碍物
                            const scaleX = canvas.width / gameConfig.viewportSize;
                            const scaleY = canvas.height / gameConfig.viewportSize;
                            
                            window.obstacleRenderer.render(ctx, scaleX, scaleY);
                            console.log('地图障碍物渲染完成');
                        }
                    } else {
                        console.warn('地图数据中未找到障碍物');
                    }
                })
                .catch(error => {
                    console.error('地图加载错误:', error);
                });
        }
        
        // 绘制网格背景
        function drawGrid() {
            const gridSize = 20;
            const width = canvas.width;
            const height = canvas.height;
            
            ctx.strokeStyle = '#e0e0e0';
            ctx.lineWidth = 0.5;
            
            // 绘制垂直线
            for (let x = 0; x <= width; x += gridSize) {
                ctx.beginPath();
                ctx.moveTo(x, 0);
                ctx.lineTo(x, height);
                ctx.stroke();
            }
            
            // 绘制水平线
            for (let y = 0; y <= height; y += gridSize) {
                ctx.beginPath();
                ctx.moveTo(0, y);
                ctx.lineTo(width, y);
                ctx.stroke();
            }
        }
        
        // 清空画布
        function clearCanvas() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            console.log('画布已清空');
        }
        
        // 页面加载完成后初始化
        window.addEventListener('load', function() {
            console.log('页面加载完成，准备测试障碍物渲染器');
            drawGrid(); // 初始绘制网格
        });
    </script>
</body>
</html>